<!DOCTYPE html><html>
<head>
    <title>Items</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <link href="/jscss/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">

        <blockquote>引用文字效果 blockquote</blockquote>
        <br/>
        <blockquote>区块 fieldset legend</blockquote>
        <fieldset>
            <legend>分割线区块</legend>
        </fieldset>
        <br/>
        <fieldset class="box">
            <legend>box内容区块</legend>
            <div style="padding:15px;">
                内容块默认无边界，方便写代码，一般padding:15px;
            </div>
        </fieldset>
        <br/>
        <fieldset class="tips" style="min-width:35em;">
            <legend>tips内容区块</legend>
            <div>
                一般用于写帮助说明
                <ul>
                    <li>第一条，内容文字内容文字内容文字。</li>
                    <li>第二条，如果嫌弃区块太窄，可以min-width定义最小宽度。</li>
                    <li>第三条，<br/>
                        内容。</li>
                </ul>
            </div>
        </fieldset>
        <br/><br/>

        <blockquote>进度条</blockquote>
        <div class="progress">
            <div style="width: 60%;">
            </div>
            <span>60%</span>
        </div>
        <br/>
        <a onclick="setprogress('.progress', 0)" class="btn">0%</a>
        <a onclick="setprogress('.progress', 20)" class="btn">20%</a>
        <a onclick="setprogress('.progress', 40)" class="btn">40%</a>
        <a onclick="setprogress('.progress', 60)" class="btn">60%</a>
        <a onclick="setprogress('.progress', 80)" class="btn">80%</a>
        <a onclick="setprogress('.progress', 100)" class="btn">100%</a>点击观看动画
        <br/><br/>
        <blockquote>文本内部强调标签 &lt;kbd&gt; &lt;code&gt;</blockquote>
        命令行输入 <kbd>cd /data</kbd> 进入data目录。<br>
        进入设置，按 <kbd>ctrl + ,</kbd> 组合键<br/>
        代码强调 <code>&lt;code&gt;</code> 标签。

        <br/><br/>
        <blockquote>代码区域 &lt;pre&gt;</blockquote>
        <pre>
//代码区域
Lay.fn.event = function(modName, events, params){
var that = this, result = null, filter = events.match(/\(.*\)$/)||[]; //提取事件过滤器
var set = (events = modName + '.'+ events).replace(filter, ''); //获取事件本体名
var callback = function(_, item){
var res = item && item.call(that, params);
res === false && result === null && (result = false);
        </pre>
        <br/><br/>
        <blockquote>HTML代码区域 &lt;pre&gt;，须调用ciy_repre();转换</blockquote>
        <pre>
<ul>
<li>调用ciy_repre()</li>
<li>HTML也会被解析</li>
</ul>
</pre>
    </div>
    <script src="/jscss/jquery-1.12.4.min.js"></script>
    <script src="/jscss/ciy.js"></script>
    <script type="text/javascript">
        'use strict';
        $(function() {
            ciy_repre();
        });
        function setprogress(dom, percent)
        {
            $(dom).children('div').css('width', percent + "%");
            $(dom).children('span').text(percent + "%");

        }
    </script>
</body></html>